<template>
  <div>
    <h5>欢迎光临 收银系统</h5>
    <h3 v-text="str"></h3>
    <span>输入购买的斤数</span><input type="number" v-model="num" />
    <button @click="btnFn">结账买单</button>
    <p>结账单：总价{{ sum }} 折后价 {{ price }} 省了{{ save }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 0,
      sum: 0,
      str: "苹果10￥、斤 < 8 折>",
      save: 0,
      price: 0,
    };
  },
  methods: {
    btnFn() {
      this.sum = this.num * 10;
      this.price = this.sum * 0.8;
      this.save = this.sum - this.price;
    },
  },
};
</script>